<template>

  <div class="flex ml-3 gap-8">
    <video-player :id="2" class="w-[423px] h-[345px] object-fill border-2 border-gray-200 ">

    </video-player>
   <div class="">
     <el-form class="flex flex-col gap-2" label-position="left" ref="elForm"  size="medium" label-width="100px">

         <el-checkbox @change="handleShow" :true-label="1" :false-label="0"
                      class="block"  v-model="form.showDatetime" label="1">显示日期</el-checkbox >
         <el-checkbox @change="handleShow" :true-label="1" :false-label="0"
                      v-model="form.showWeekday" label="1">显示星期</el-checkbox >
         <el-checkbox @change="handleShow" :true-label="1" :false-label="0"
                      v-model="form.showChannelName">显示名称</el-checkbox >

     </el-form>
   </div>
  </div>
</template>

<script>
import {osdsettings} from "../../../api/api";
import {getOsdSettings} from "@/api/api2";
import videoPlayer from "@/views/mini/videoplayer.vue";

export default {
  name: "xianshi",
  components: {
    videoPlayer,
  },
  data() {
    return {
      form: {

        showDatetime: 0,
        showWeekday: 0,
        showChannelName: 0,
      },

    };
  },
  created() {
    getOsdSettings().then(res => {
      if (res.code === 0) {
        this.form = res.data;
      } else {
        this.$message({
          message: '获取信息失败',
          type: 'error'
        });
      }
    })
  },
  watch: {
    'form.showDatetime'(newValue) {
      // 当 "显示日期" 的值发生变化时
      if (newValue === 0) {
        // 如果取消勾选 "显示日期"，则同时取消勾选 "显示星期"
        this.form.showWeekday = 0;
      } else {
        // 如果勾选 "显示日期"，则同时勾选 "显示星期"
        this.form.showWeekday = 1;
      }
    }
  },

  methods: {
    handleShow() {
      this.$nextTick(() => {
        osdsettings(this.form).then((res) => {
          if (res.code === 0) {
            this.$message.success("设置成功");
          } else {
            this.$message.error("设置失败");
          }
        })
      });
    }
  },
}
</script>


<style scoped>

</style>
